<script setup lang="ts">
	import { ref } from 'vue'
	import { onReady, onLoad } from '@dcloudio/uni-app'
	import { getOrderDetail } from '../../api/order'
	import type { orderDes } from '@/types'
import { formatDate } from '../../utils'
	
	const onCopy = (id : string) => {
		uni.setClipboardData({ data: id })
	}
	const query = defineProps<{
		orderNo ?: number | string
	}>()
	const orderDetail = ref<orderDes>(null)
	const defaultImg = 'https://via.placeholder.com/300?text=加载失败' // 默认图
	const params  = ref({
		CheckIn:'',
		CheckOut:'',
		AdultGuests:1,
		Rooms:1,
		ChildrenGuests:0
	})
	const orderInfo = ref([
		{ label: '订单号', value: 'orderNo' },
		{ label: '下单时间', value: 'orderTime', formatDate:true},
		{ label: '支付方式', value: 'payMethodDesc' },
		{ label: '订单状态', value: 'statusDesc', isSuccess: true },
	]);
	const roomInfo = ref([
		{ label: '房型', value: 'roomTypeName' },
		{ label: '入住日期', value: 'checkIn' ,formatDate:true},
		{ label: '离店日期', value: 'checkOut' ,formatDate:true},
		{ label: '入住天数', value: 'nights', unit: '晚' },
		{ label: '入住人数', value: '2',  isPeople:true},
		{ label: '早餐', value: 'breakfast', isboolean: true },
	]);

	const guestInfo = ref([
		// { label: '联系人', value: 'contactName' },
		{ label: '联系电话', value: 'contactPhone' },
	]);

	const priceInfo = ref([
		{ label: '房费', value: 'totalPrice' },
		{ label: '税费和服务费', value: 'taxServiceFee' },
		{ label: '总价', value: 'totalAmount', isTotal: true },
	]);
	onLoad(() => {
		console.log(query)
		getMemberOrderByIdData()
	})

	const getMemberOrderByIdData = async () => {
		const res = await getOrderDetail(query.orderNo)
		console.log(res)
		orderDetail.value = res.data
		params.value.CheckIn=formatDate(res.data.checkIn,'YYYY-MM-DD')
		params.value.CheckOut=formatDate(res.data.checkOut,'YYYY-MM-DD')
	}
</script>
<template>
	<scroll-view scroll-y class="scroll-view viewport">
		<!-- 订单状态 -->
		<view class="info-module status">
			<text class="icon icon-dizhi"></text>
			<view class="right">
				<view class="">{{orderDetail.statusDesc}}</view>
				<view class="">{{orderDetail.status==0?'为保障您的出行安排，此订单需在 12 小时内完成支付，超时将自动关闭订单':'您的订单已确认，请按时入住'}}</view>
			</view>
		</view>

		<view class="info-module hotel-info">
			<image class="hotel-img" :src="orderDetail.hotel?.pictures[0] " mode="aspectFill" :lazy-load="true" :data-img="defaultImg" ></image>
			<view class="right">
				<view class="name">{{orderDetail.hotel?.name}}</view>
				<view class="address">{{orderDetail.hotel?.address}}</view>
				<view class="tel">{{orderDetail.hotel?.tel}}</view>
			</view>
		</view>

		<view class="info-module">
			<view class="module-title">订单信息</view>
			<view v-for="(item, index) in orderInfo" :key="index" class="info-item">
				<text class="item-label">{{ item.label }}</text>
				<text class="item-value" :class="{ 'success': item.isSuccess }">{{ item.formatDate ? formatDate(orderDetail[item.value],'YYYY-MM-DD'):orderDetail[item.value] }}</text>
				<!-- <text class="item-value" >{{ orderDetail[item.value] }}</text> -->
			</view>
		</view>
		<!-- 房型信息模块 -->
		<view class="info-module">
			<view class="module-title">房型信息</view>
			<view v-for="(item, index) in roomInfo" :key="index" class="info-item">
				<text class="item-label">{{ item.label }}</text>
				<text v-if="item?.isPeople">
					{{orderDetail.bookedRooms[0].adultGuests+'成人'+orderDetail.bookedRooms[0].childrenGuests +'儿童' }}
				</text>
				
				<text
					class="item-value" v-else>{{item.isboolean? (orderDetail[item.value]?'含早餐':'不含早餐') :item.formatDate ? formatDate(orderDetail[item.value],'YYYY-MM-DD'):orderDetail[item.value]  }}
					{{item?.unit}}</text>
			</view>
		</view>

		<!-- 入住人信息模块 -->
		<view class="info-module">
			<view class="module-title">入住人信息</view>
			<view  class="info-item">
				<text class="item-label">入住人</text>
				<text class="item-value">{{orderDetail.bookedRooms.map(item=>item.guests.filter(val=>val.isPrimary)[0].fullName).join('') }}</text>
			</view>
			
			<view v-for="(item, index) in guestInfo" :key="index" class="info-item">
				<text class="item-label">{{ item.label }}</text>
				<text class="item-value">{{ orderDetail[item.value] }}</text>
			</view>
		</view>

		<!-- 价格信息模块 -->
		<view class="info-module">
			<view class="module-title">价格信息</view>
			<view v-for="(item, index) in priceInfo" :key="index" class="info-item">
				<text class="item-label">{{ item.label }}</text>
				<text class="item-value"
					:class="{ 'total': item.isTotal }">{{orderDetail.currency}}{{ orderDetail[item.value] }}</text>
			</view>
		</view>

		<view class="info-module">
			<view class="module-title">取消政策</view>
			<view class="info-item">
				<text class="item-label" v-if="orderDetail.status==0">本订单为未付款订单，如果在 <text style="color: #ff6600;">{{formatDate(orderDetail.autoCancelAt,'YYYY-MM-DD HH:mm:SS')}}</text>（您的本地时间）之前未完成支付，系统将自动取消该订单。请尽快完成支付以保留订单。</text>
				<text class="item-label" v-else>
					
					<view v-for="item in orderDetail.cancelPolicies" :key="item.id">
						从{{formatDate(item.fromTime,'YYYY-MM-DD HH:mm:SS')}}到{{formatDate(item.toTime,'YYYY-MM-DD HH:mm:SS')}}{{item.penaltyAmountDesc}}
					</view>
				</text>
			</view>

		</view>
		<view class="info-module">
			<view class="module-title">特殊要求</view>
			<view class="info-item">
				<text class="item-label">{{orderDetail.specialRequest}}</text>
			</view>
		</view>
		<view class="info-module btns" >
			<button hover-class="none" class="btn" open-type="contact">联系客服</button>
			<navigator  hover-class="none" :url="`/pages/hotel/detail?id=${orderDetail.hotel.id}&destinationId=${orderDetail.hotel.destinationId}&params=${JSON.stringify(params)}`" class="btn primary">再次预订</navigator>
			<navigator  hover-class="none" v-if="orderDetail.status==0" :url="`/pagesOrder/payment/index?orderNo=${query.orderNo}`" class="btn primary">去支付</navigator>
		</view>
		<view style="height: 100rpx;">
			
		</view>
	</scroll-view>
</template>
<style lang="scss" scoped>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}
	.info-module {
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		background-color: #fff;
	}

	.module-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
		border-left: 8rpx solid #007aff;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		// border-bottom: 1rpx solid #f5f5f5;

		&:last-child {
			border-bottom: none;
		}

		.item-label {
			font-size: 28rpx;
			color: #666;
		}

		.item-value {
			font-size: 28rpx;
			color: #333;
		}

		.success {
			color: #00cc66;
		}

		.total {
			color: #ff6600;
			font-weight: bold;
		}
	}

	.btns {
		display: flex;

		.btn {
			flex: 1;
			height: 80rpx;
			margin: 0 10rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			color: $uni-color-primary;
			border-radius: 10rpx;
			background-color: #fff;

			&.primary {
				background-color: $uni-color-primary;
				color: #fff;
			}

		}
	}

	.viewport {
		background-color: #f7f7f8;
	}
	.status {
		display: flex;
		align-items: center;
		color:#fff;
		background-color: #3b82f6;
		.icon {
			font-size: 40rpx;
			padding-right: 20rpx;
		}
	}
	
	.hotel-info {
		display: flex;
		.hotel-img {
			width: 192rpx;
			height: 192rpx;
			border-radius: 10rpx;
		}
	
		.right {
			flex:1;
			padding-left: 20rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			.name{
				font-weight: bold;
				font-size: 32rpx;
				padding-bottom: 20rpx;		}
			.address{
				color: #666;
			}
			.tel{
				color: #666;
			}
		}
	}
	
	.overview {
		display: flex;
		flex-direction: column;
		align-items: center;

		line-height: 1;
		padding-bottom: 30rpx;
		color: #fff;
		background-image: url('../../static/bg.png');
		background-size: cover;

		.status {
			font-size: 36rpx;
		}

		.status::before {
			margin-right: 6rpx;
			font-weight: 500;
		}

		.tips {
			margin: 30rpx 0;
			display: flex;
			font-size: 14px;
			align-items: center;

			.money {
				margin-right: 30rpx;
			}
		}

		.button-group {
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.button {
			width: 260rpx;
			height: 64rpx;
			margin: 0 10rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 28rpx;
			color: $uni-color-primary;
			border-radius: 68rpx;
			background-color: #fff;
		}
	}

	.shipment {
		line-height: 1.4;
		padding: 0 20rpx;
		margin: 20rpx 20rpx 0;
		border-radius: 10rpx;
		background-color: #fff;

		.locate,
		.item {
			min-height: 120rpx;
			padding: 30rpx 30rpx 25rpx 75rpx;
			background-size: 50rpx;
			background-repeat: no-repeat;
			background-position: 6rpx center;
		}

		.locate {
			background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);

			.user {
				font-size: 26rpx;
				color: #444;
			}

			.address {
				font-size: 24rpx;
				color: #666;
			}
		}

		.item {
			background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
			border-bottom: 1rpx solid #eee;
			position: relative;

			.message {
				font-size: 26rpx;
				color: #444;
			}

			.date {
				font-size: 24rpx;
				color: #666;
			}
		}
	}

	.goods {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eee;

			.navigator {
				display: flex;
				margin: 20rpx 0;
			}

			.cover {
				width: 170rpx;
				height: 170rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.meta {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;
			}

			.name {
				height: 80rpx;
				font-size: 26rpx;
				color: #444;
			}

			.type {
				line-height: 1.8;
				padding: 0 15rpx;
				margin-top: 6rpx;
				font-size: 24rpx;
				align-self: flex-start;
				border-radius: 4rpx;
				color: #888;
				background-color: #f7f7f8;
			}

			.price {
				display: flex;
				margin-top: 6rpx;
				font-size: 24rpx;
			}

			.symbol {
				font-size: 20rpx;
			}

			.original {
				color: #999;
				text-decoration: line-through;
			}

			.actual {
				margin-left: 10rpx;
				color: #444;
			}

			.text {
				font-size: 22rpx;
			}

			.quantity {
				position: absolute;
				bottom: 0;
				right: 0;
				font-size: 24rpx;
				color: #444;
			}

			.action {
				display: flex;
				flex-direction: row-reverse;
				justify-content: flex-start;
				padding: 30rpx 0 0;

				.button {
					width: 200rpx;
					height: 60rpx;
					text-align: center;
					justify-content: center;
					line-height: 60rpx;
					margin-left: 20rpx;
					border-radius: 60rpx;
					border: 1rpx solid #ccc;
					font-size: 26rpx;
					color: #444;
				}

				.primary {
					color: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.total {
			line-height: 1;
			font-size: 26rpx;
			padding: 20rpx 0;
			color: #666;

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 0;
			}

			.symbol::before {
				content: '¥';
				font-size: 80%;
				margin-right: 3rpx;
			}

			.primary {
				color: #cf4444;
				font-size: 36rpx;
			}
		}
	}

	.detail {
		line-height: 1;
		padding: 30rpx 20rpx 0;
		margin: 20rpx 20rpx 0;
		font-size: 26rpx;
		color: #666;
		border-radius: 10rpx;
		background-color: #fff;

		.title {
			font-size: 30rpx;
			color: #444;
		}

		.row {
			padding: 20rpx 0;

			.item {
				padding: 10rpx 0;
				display: flex;
				align-items: center;
			}

			.copy {
				border-radius: 20rpx;
				font-size: 20rpx;
				border: 1px solid #ccc;
				padding: 5rpx 10rpx;
				margin-left: 10rpx;
			}
		}
	}

	.toolbar-height {
		height: 100rpx;
		box-sizing: content-box;
	}

	.toolbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		z-index: 1;

		height: 100rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		border-top: 1rpx solid #ededed;
		border-bottom: 1rpx solid #ededed;
		background-color: #fff;
		box-sizing: content-box;

		.button {
			display: flex;
			justify-content: center;
			align-items: center;

			width: 200rpx;
			height: 72rpx;
			margin-left: 15rpx;
			font-size: 26rpx;
			border-radius: 72rpx;
			border: 1rpx solid #ccc;
			color: #444;
		}

		.delete {
			order: 4;
		}

		.button {
			order: 3;
		}

		.secondary {
			order: 2;
			color: $uni-color-primary;
			border-color: $uni-color-primary;
		}

		.primary {
			order: 1;
			color: #fff;
			background-color: $uni-color-primary;
		}
	}

	.popup-root {
		padding: 30rpx 30rpx 0;
		border-radius: 10rpx 10rpx 0 0;
		overflow: hidden;

		.title {
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.description {
			font-size: 28rpx;
			padding: 0 20rpx;

			.tips {
				color: #444;
				margin-bottom: 12rpx;
			}

			.cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15rpx 0;
				color: #666;
			}

			.icon::before {
				content: '\e6cd';
				font-family: 'erabbit' !important;
				font-size: 38rpx;
				color: #999;
			}

			.icon.checked::before {
				content: '\e6cc';
				font-size: 38rpx;
				color: $uni-color-primary;
			}
		}

		.footer {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0 40rpx;
			font-size: 28rpx;
			color: #444;

			.button {
				flex: 1;
				height: 72rpx;
				text-align: center;
				line-height: 72rpx;
				margin: 0 20rpx;
				color: #444;
				border-radius: 72rpx;
				border: 1rpx solid #ccc;
			}

			.primary {
				color: #fff;
				background-color: $uni-color-primary;
				border: none;
			}
		}
	}
</style>